<template>
	<view>
		<view class="margin-left-lg">
			<!-- 卡片轮播区域 -->
			<swiper style="height: 300upx !important;" :previous-margin="previous+'rpx'" :next-margin="next+'rpx'"
				:indicator-dots="indicatorDots" :indicator-color="indicatorColor"
				:indicator-active-color="indicatorActiveColor" :circular="circular" :autoplay="autoplay"
				:interval="interval" :duration="duration" @change="change">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="bg-orange margin-left-sm radius-lg" style="position: relative; height: 100%">
						<view class="text-white text-df" style="position: absolute; top: 40rpx; left: 30rpx;">
							<p>{{item.card.cardTitle}}</p>
						</view>
						<view class="text-white text-df" style="position: absolute; bottom: 40rpx; left: 30rpx;">
							<p>￥{{item.card.price}}/{{item.card.frequency}}天</p>
						</view>
						<view class="text-white text-df" style="position: absolute; bottom: 40rpx; right: 30rpx;">
							<p>购买后{{item.card.term}}天内有效</p>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 卡券内容区域 -->
		<view class="bg-white margin-lr-lg margin-top-sm radius-lg">
			<view class="margin-lr-lg solid-bottom">
				<u-tabs :list="tabs" @click="tabsClick" lineWidth="140rpx" lineHeight="4rpx" lineColor="orange"
					:activeStyle="activeStyle" :scrollable="false"></u-tabs>
			</view>
			<view class="margin-lr-lg margin-tb-sm padding solid radius-lg">
				<view class="flex justify-around align-center">
					<view>
						<uni-icons custom-prefix="cuIcon" type="cuIcon-qiapian" color="orange" size="40"></uni-icons>
						<u--text :bold="true" size="15" color="orange" :text="card.frequency+'天'" align="center" />
					</view>
					<view style="display: flex;flex-direction: column;">
						<uni-icons custom-prefix="cuIcon" type="cuIcon-zuowei" color="orange" size="40"></uni-icons>
						<u--text v-if="card.usable==0" :bold="true" size="15" color="orange" text="经济区"
							align="center" />
						<u--text v-else-if="card.usable==1" :bold="true" size="15" color="orange" text="舒适区"
							align="center" />
					</view>
				</view>
			</view>
			<view class="margin-lr-lg margin-tb-sm padding solid radius-lg">
				<u--text :bold="false" size="20" color="orange" :text="card.cardTitle" align="left" />
				<view class="flex justify-around align-center">
					<view class="flex justify-start align-center">
						<uni-icons custom-prefix="cuIcon" type="cuIcon-qiapian" color="orange" size="40"></uni-icons>
						<view class="margin-left-sm margin-top-sm">
							<u--text :bold="false" size="15" color="orange" :text="'购买后'+card.term+'天内有效'"
								align="center" />
						</view>
					</view>
					<view>
						<view class="margin-left-sm margin-top-sm">
							<u--text :bold="false" size="15" color="orange" text="1张" align="left" />
						</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-card-package",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {
				// card: { 参数说明
				// 	title: '', 优惠卡标题
				// 	money: 0, 金额
				// 	frequency: 0, 次数
				// 	term: 0, 有效期
				// 	area: 0 区域 0为舒适区 1为经济区
				//  areaTitle:'舒适区' 区域名字
				// }
				//是否显示面板指示点
				indicatorDots: false,
				indicatorColor: '#8799a3',
				indicatorActiveColor: '#0081ff',
				//循环播放
				circular: false,
				//是否自动切换
				autoplay: false,
				//时间间隔
				interval: 2000,
				//持续时间
				duration: 500,
				//后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
				next: 40,
				//前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
				previous: -20,
				tabs: [{
					name: '卡券内容'
				}],
				activeStyle: {
					color: 'orange',
					fontWeight: 'bold'
				},
				card: {
					title: '',
					money: 0,
					frequency: 0,
					term: 0,
					area: 0,
					areaTitle: ''
				}
			}
		},
		mounted() {
			this.card = this.list[0].card
			console.info('mounted', this.card)
		},
		methods: {
			change(e) {
				var current = e.detail.current
				const that = this
				this.card = this.list[current].card
				console.log(current)
				if (current == 0) {
					setTimeout(function() {
						that.next = 80
						that.previous = -20
					}, 500);

				} else if (current == this.list.length - 1) {
					this.next = 58
					this.previous = 40
				}
			},
			tabsClick(index) {
				console.log(index)
			},
			async getCardList() {

			}
		},
	}
</script>

<style lang="scss">

</style>